import React, { useEffect, useCallback, useState, useMemo } from 'react';
import { Button, Form, Select, message, Modal } from 'tea-component';
import useAppStore from '@ide/store';
import { IdeSetting } from '@ide/store/settingStore';
import { useIdeStore } from 'ide-plugin';
export default function SetModal() {
  const {
    setting, fontSizes, lineHeights, editorThemes, themes,
    setVisible, setModalVisible, updateIdeSetting
  } = useAppStore();
  const {
    updateIdeStyle, setEditorTheme
  } = useIdeStore();
  const [editorLineHeight, setEditorLineHeight] = useState(setting.editorLineHeight);
  const [editorFontSize, setEditorFontSize] = useState(setting.editorFontSize);
  const [editorContentTheme, setEditorContentTheme] = useState<IdeSetting['setting']['editorTheme']>(setting.editorTheme);
  const [theme, setTheme] = useState(setting.theme);

  // 获取初始化配置
  useEffect(() => {
    setEditorLineHeight(setting.editorLineHeight);
    setEditorFontSize(setting.editorFontSize);
    setEditorContentTheme(setting.editorTheme);
    setTheme(setting.theme);
  }, [setting]);

  useEffect(() => {
    updateIdeStyle({
      fontSize: setting.editorFontSize,
      lineHeight: setting.editorLineHeight
    });
  }, [setting.editorFontSize, setting.editorLineHeight]);

  useEffect(() => {
    setEditorTheme(setting.editorTheme);
  },[setting.editorTheme]);

  const close = () => {
    setModalVisible(false);
  };

  const btnDisabled = useMemo(() => {
    return !editorFontSize;
  }, [editorFontSize]);

  // 确认更改配置
  const changeSetSubmit = useCallback(async () => {
    await updateIdeSetting({
      editorLineHeight,
      editorFontSize,
      theme: theme || 'dark',
      editorTheme: editorContentTheme
    });
    close();
    message.success({
      content: '修改配置成功'
    });
  }, [editorLineHeight, editorFontSize, theme, editorContentTheme, btnDisabled]);

  return (
    <Modal
      maskClosable
      visible={setVisible}
      caption="设置"
      onClose={close}
      size="m"
      className={`${setting.theme}_model`}
      maskStyle={{
        backgroundColor: 'rgba(0,0,0,0.2)'
      }}
    >
      <Modal.Body>
        <Form>
          <Form.Item label="字体大小">
            <Select
              size='full'
              matchButtonWidth
              appearance="button"
              options={fontSizes.map(item => ({ value: item, text: item }))}
              value={editorFontSize}
              onChange={value => {
                setEditorFontSize(value);
              }}
            />
          </Form.Item>
          <Form.Item label="行高">
            <Select
              size='full'
              matchButtonWidth
              appearance="button"
              options={lineHeights.map(item => ({ value: item, text: item }))}
              value={editorLineHeight}
              onChange={value => {
                setEditorLineHeight(value);
              }}
            />
          </Form.Item>
          <Form.Item label="编辑器主题">
            <Select
              size='full'
              matchButtonWidth
              appearance="button"
              options={editorThemes.map(item => ({ value: item, text: item }))}
              value={editorContentTheme}
              onChange={value => {
                setEditorContentTheme(value as IdeSetting['setting']['editorTheme']);
              }}
            />
          </Form.Item>
          <Form.Item label="外观主题">
            <Select
              size='full'
              matchButtonWidth
              appearance="button"
              options={themes.map(item => ({ value: item, text: item }))}
              value={theme}
              onChange={value => {
                setTheme(value);
              }}
            />
          </Form.Item>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button type="primary" disabled={btnDisabled} onClick={changeSetSubmit}>确定</Button>
        <Button type="weak" onClick={close}>
          取消
        </Button>
      </Modal.Footer>
    </Modal>
  );
}
